import React, { useState, useRef } from 'react';
import {
  ModalSheet,
  ModalSheetHeader,
  ModalSheetBody,
  ModalSheetFooter,
  ThemeProvider,
  ThemeToggle,
  useTheme,
  type ModalSheetRef,
  type SnapPoint,
} from '../../components/common/ModalSheet';
import './ThemeDemo.css';

const ThemeDemo: React.FC = () => {
  const [isOpen, setIsOpen] = useState(false);
  const modalRef = useRef<ModalSheetRef>(null);

  const snapPoints: SnapPoint[] = [0, 100, 0.4, 0.8, 1];

  const openModal = () => setIsOpen(true);
  const closeModal = () => setIsOpen(false);

  return (
    <ThemeProvider>
      <ThemeDemoContent 
        isOpen={isOpen}
        openModal={openModal}
        closeModal={closeModal}
        modalRef={modalRef}
        snapPoints={snapPoints}
      />
    </ThemeProvider>
  );
};

const ThemeDemoContent: React.FC<{
  isOpen: boolean;
  openModal: () => void;
  closeModal: () => void;
  modalRef: React.RefObject<ModalSheetRef>;
  snapPoints: SnapPoint[];
}> = ({ isOpen, openModal, closeModal, modalRef, snapPoints }) => {
  const { theme } = useTheme();

  return (
    <div className='theme-demo'>
      <div className='demo-header'>
        <button className='back-button' onClick={() => window.history.back()}>
          ← Back
        </button>
        <h1>主题系统演示</h1>
        <p>体验深色模式和自定义主题</p>
      </div>

      {/* 主题控制面板 */}
      <div className='theme-control-panel'>
        <div className='control-group'>
          <h3>主题设置</h3>
          <ThemeToggle showLabel={true} />
        </div>
        
        <div className='control-group'>
          <h3>当前主题信息</h3>
          <div className='theme-info'>
            <p><strong>模式:</strong> {theme.mode}</p>
            <p><strong>背景色:</strong> {theme.colors.background}</p>
            <p><strong>主色调:</strong> {theme.colors.primary}</p>
          </div>
        </div>

        <div className='control-group'>
          <h3>颜色预览</h3>
          <div className='color-palette'>
            <div className='color-item'>
              <div 
                className='color-swatch' 
                style={{ backgroundColor: theme.colors.primary }}
              />
              <span>Primary</span>
            </div>
            <div className='color-item'>
              <div 
                className='color-swatch' 
                style={{ backgroundColor: theme.colors.secondary }}
              />
              <span>Secondary</span>
            </div>
            <div className='color-item'>
              <div 
                className='color-swatch' 
                style={{ backgroundColor: theme.colors.success }}
              />
              <span>Success</span>
            </div>
            <div className='color-item'>
              <div 
                className='color-swatch' 
                style={{ backgroundColor: theme.colors.warning }}
              />
              <span>Warning</span>
            </div>
            <div className='color-item'>
              <div 
                className='color-swatch' 
                style={{ backgroundColor: theme.colors.error }}
              />
              <span>Error</span>
            </div>
          </div>
        </div>
      </div>

      {/* 打开弹框按钮 */}
      <div className='demo-actions'>
        <button className='modal-sheet-button' onClick={openModal}>
          打开主题弹框
        </button>
      </div>

      {/* 主题化的 Modal Sheet */}
      <ModalSheet
        ref={modalRef}
        open={isOpen}
        onClose={closeModal}
        snapPoints={snapPoints}
        initialSnap={1}
        position="bottom"
        animation="slide"
        animationPreset="springy"
        enableAnimationEnhancements={true}
        enableTheme={true}
      >
        <ModalSheetHeader>
          <h2>主题化弹框</h2>
        </ModalSheetHeader>
        
        <ModalSheetBody>
          <div className='themed-content'>
            <h3>主题系统特性</h3>
            <ul>
              <li>🌙 深色模式支持</li>
              <li>🎨 自定义颜色主题</li>
              <li>📱 跟随系统主题</li>
              <li>💾 主题偏好记忆</li>
              <li>🎯 CSS变量驱动</li>
              <li>⚡ 实时主题切换</li>
            </ul>

            <div className='theme-examples'>
              <h4>主题化组件示例</h4>
              <div className='button-group'>
                <button className='modal-sheet-button'>主要按钮</button>
                <button className='modal-sheet-button modal-sheet-button--secondary'>
                  次要按钮
                </button>
                <button className='modal-sheet-button modal-sheet-button--outline'>
                  边框按钮
                </button>
              </div>

              <div className='status-indicators'>
                <div className='status-item status-success'>
                  <span className='status-dot'></span>
                  成功状态
                </div>
                <div className='status-item status-warning'>
                  <span className='status-dot'></span>
                  警告状态
                </div>
                <div className='status-item status-error'>
                  <span className='status-dot'></span>
                  错误状态
                </div>
                <div className='status-item status-info'>
                  <span className='status-dot'></span>
                  信息状态
                </div>
              </div>
            </div>
          </div>
        </ModalSheetBody>
        
        <ModalSheetFooter>
          <button className='modal-sheet-button modal-sheet-button--outline' onClick={closeModal}>
            取消
          </button>
          <button className='modal-sheet-button' onClick={closeModal}>
            确定
          </button>
        </ModalSheetFooter>
      </ModalSheet>
    </div>
  );
};

export default ThemeDemo;

